<!DOCTYPE html><html><head><title>在线Web前端开发“第一课” - 课程大纲</title><meta charset='utf-8'><link href='https://cdn.maxiang.io/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "WenQuanYi Micro Hei", SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h3>web高级在线预科班课程大纲</h3>

<p><strong>课程目标</strong> <br>
帮助基础薄弱学员快速入门前端开发</p>

<ul><li><p>深入研究HTML5/CSS3底层渲染机制</p></li>
<li><p>全面学会JavaScript核心基础知识</p></li>
<li><p>快速掌握前端实战开发技巧</p></li>
</ul>

<p><strong>课程介绍</strong></p>

<ul><li><p>课程内容全面：覆盖“HTML5、CSS3、less、javascript、jQuery、Bootstrap、Swiper、PC端开发、移动端开发”等基础知识和实战框架等</p></li>
<li><p>CSS内容深入：全网CSS视频大多是基础语法的讲解，本课程将基于w3c权威规范，带你彻底掌握CSS底层核心机制（很可能是全网独家哦~~）</p></li>
<li><p>实战项目多：N多个阶段性课堂实战案例，5个以上一线企业原版实战项目，帮助你彻底掌握前端开发基础知识和实战应用！</p></li>
</ul>

<p><strong>适合人群</strong></p>

<ul><li><p>在校大学生，或即将毕业(实习)找工作者</p></li>
<li><p>前端开发自学者，想要全面系统的学习前端技术</p></li>
<li><p>有前端开发经验，但是对于CSS样式掌握不扎实/不深入的</p></li>
</ul>

<hr>

<h4 id="阶段一html5css3深入剖析和高级应用">阶段一：HTML5/CSS3深入剖析和高级应用</h4>

<p><strong>第一部分： 掌握HTML(5)和CSS(3)语⾔核⼼</strong></p>

<ul><li><p>HTML语义: 学会如何写出更优html </p></li>
<li><p>HTML及扩展: Doctype、Meta、DTD、Entity、XML、namespace、SVG、MathML </p></li>
<li><p>CSS绘制: linear-gradient，radial-gradient、background、box-shadow，text-shadow、 border-radius、Filter , clip-path，Counter等 </p></li>
<li><p>CSS机制at-rule: @charset、@import、@namespace、@document、@font-face、 @keyframes、@media、@page、@supports </p></li>
<li><p>CSS变量var的使⽤</p></li>
</ul>

<p><strong>第二部分：CSS选择器世界深度剖析</strong></p>

<ul><li><p>选择器的优先级 </p></li>
<li><p>选择器的命名 </p></li>
<li><p>精通CSS选择符-众多⾼级选择器技术的核⼼ </p></li>
<li><p>AMCSS开发模式简介 </p></li>
<li><p>CSS选择器中的正则表达式 </p></li>
<li><p>全⾯解读伪类和伪元素</p></li>
</ul>

<p><strong>第三部分：各种布局实战套路</strong></p>

<ul><li><p>float布局 </p></li>
<li><p>盒布局 </p></li>
<li><p>flex布局 </p></li>
<li><p>Grid布局 </p></li>
<li><p>columns布局 </p></li>
<li><p>Shapes布局</p></li>
</ul>

<p><strong>第四部分：定位和层叠上下⽂</strong></p>

<ul><li><p>定位常⻅值及原理 </p></li>
<li><p>postition fixed和sticky </p></li>
<li><p>层叠上下⽂形成条件 </p></li>
<li><p>层叠上下⽂和层叠顺序 </p></li>
<li><p>层叠上下⽂对z-index的影响</p></li>
</ul>

<p><strong>第五部分：icon全解析</strong></p>

<ul><li><p>图⽚及HTML<code>&lt;area&gt;</code>技术 </p></li>
<li><p>icon-Sprites </p></li>
<li><p>iconfont-HTML </p></li>
<li><p>iconfont-CSS </p></li>
<li><p>SVG Sprites </p></li>
<li><p>SVG icon </p></li>
<li><p>CSS绘制icon</p></li>
</ul>

<p><strong>第六部分：彻底弄懂前端动画世界</strong></p>

<ul><li><p>动画细节和原理深⼊解析 </p></li>
<li><p>transform 全解 </p></li>
<li><p>transition 过渡 </p></li>
<li><p>animation动画与交互 </p></li>
<li><p>关键帧动画steps功能符深⼊介绍</p></li>
</ul>

<p><strong>第七部分：移动端响应式布局技巧</strong></p>

<ul><li><p>设备像素、设备独⽴像素、CSS像素、PPI、devicePixelRatio </p></li>
<li><p>layout viewport 与 visual viewport </p></li>
<li><p>viewport缩放适配 </p></li>
<li><p>媒体查询@media </p></li>
<li><p>vw弹性适配 </p></li>
<li><p>动态rem适配</p></li>
<li><p>300ms延迟、fastclick原理和实现 </p></li>
<li><p>点击穿透、1px实现</p></li>
</ul>

<p><strong>第八部分：CSS⼯程化和框架应⽤</strong></p>

<ul><li><p>预处理器作⽤和原理 </p></li>
<li><p>less/sass代码实践 </p></li>
<li><p>bootstrap原理和⽤法 </p></li>
<li><p>PostCSS和基于PostCSS的CSS⼯程化体系 </p></li>
<li><p>CSS模块化⽅案(css modules） </p></li>
<li><p>Vue和React框架中的CSS使⽤</p></li>
</ul>

<p><strong>第九部分：CSS⼯作原理和性能优化</strong></p>

<ul><li><p>CSS渲染和解析原理 </p></li>
<li><p>CSS布局模型： </p>

<ul>
<li><p>流动模型（Flow） </p></li>
<li><p>浮动模型（Float） </p></li>
<li><p>层模型（Layer） </p></li></ul></li>
<li><p>BFC / IFC： </p>

<ul>
<li><p>BFC的原理和功能 </p></li>
<li><p>IFC的原理和功能 </p></li>
<li><p>理解 font-size、line-height、vertical-align </p></li></ul></li>
<li><p>CSS性能优化： </p>

<ul>
<li><p>提升CSS渲染性能的⽅⾯汇总 </p></li>
<li><p>absolute/display隐藏与回流等性能 </p></li>
<li><p>base64:URL背景图⽚与web⻚⾯性能优化</p></li></ul></li>
</ul>

<p><strong>第十部分：经典⾯试真题解析</strong></p>

<ul><li><p>掌握盒⼦⽔平垂直居中的五⼤⽅案 </p></li>
<li><p>已知宽⾼实现盒⼦⽔平垂直居中 </p></li>
<li><p>宽⾼不定实现盒⼦⽔平垂直居中 </p></li>
<li><p>关于CSS3中盒模型的⼏道⾯试题</p></li>
<li><p>经典布局⽅案：圣杯、双⻜翼布局等 </p></li>
<li><p>⾯试必问:移动端响应式布局开发的三⼤⽅案 </p></li>
<li><p>经典的CSS3⾯试题解析(BAT和TMD⾯试题)</p></li>
</ul>

<hr>

<h4 id="阶段二javascript从基础到实战入门秘籍">阶段二：JavaScript从基础到实战（入门秘籍）</h4>

<p><strong>第一部分：全面剖析JS基础知识</strong></p>

<ul><li><p>ECMAScript的发展历程和重大变革</p></li>
<li><p>声明变量的5种方案</p></li>
<li><p>操作语句中的3种循环和判断</p></li>
<li><p>数据类型及详细剖析</p></li>
<li><p>数据类型检测和相互转换</p></li>
<li><p>函数详解:形参/实参/返回值/arguments</p></li>
</ul>

<p><strong>第二部分：String/Math/Array/Object常用API</strong></p>

<ul><li><p>String字符串中常用的15种方法</p></li>
<li><p>Math数学函数中常用的10种方法</p></li>
<li><p>Array数组中常用的20种方法</p></li>
<li><p>Object对象中常用的10种方法</p></li>
<li><p>面试必考：queryURLParams地址参数解析</p></li>
<li><p>案例剖析：随机验证码的实现原理</p></li>
</ul>

<p><strong>第三部分：ES6新语法特性剖析</strong></p>

<ul><li><p>let/const以及Symbol/BigInt</p></li>
<li><p>对象/数组/字符串的解构赋值</p></li>
<li><p>箭头函数和运算符的基础应用</p></li>
<li><p>Promise/async/await的基础应用</p></li>
<li><p>Class类声明的基础应用</p></li>
<li><p>Set/Map/WeakSet/WeakMap的基础应用</p></li>
</ul>

<p><strong>第四部分：DOM/BOM编程艺术</strong></p>

<ul><li><p>DOM文档树中常用的属性和方法</p></li>
<li><p>DOM节点树中常用的属性和方法</p></li>
<li><p>JS中常用的13个盒模型属性</p></li>
<li><p>DOM中的事件操作</p></li>
<li><p>BOM中常用的操作方法</p></li>
<li><p>小案例：页卡切换和购物车计算器</p></li>
</ul>

<p><strong>第五部分：jQuery和Zepto应用指南</strong></p>

<ul><li><p>jQuery选择器和常用dom操作</p></li>
<li><p>jQuery中的样式和属性操作</p></li>
<li><p>jQuery中的动画和事件处理</p></li>
<li><p>jQuery中的ajax和工具类方法</p></li>
<li><p>Zepto和jQuery的区别</p></li>
<li><p>小案例：JQ/Swiper实现轮播图</p></li>
</ul>

<hr>

<h4 id="一线大厂原版项目实战">一线大厂原版项目实战</h4>

<p><strong>项目一：⼩⽶商城官⽹</strong> <br>
<strong>项目二：花瓣⽹[瀑布流]</strong> <br>
<strong>项目三：企业OA办公管理系统</strong> <br>
<strong>项目四：⽹易新闻APP</strong> <br>
<strong>项目五：QQ音乐APP</strong></p></div></body></html>